<div id="cat-config" style="display:none;"></div>
<div id="picAddress" class="tableform widgetconfig">
  <h4><{t app="b2c"}>基本设置<{/t}></h4>
  <div id="divisionDefault">
    <table width="100%" cellpadding="0" cellspacing="0">
      <tr>
        <th><{t app="b2c"}>宽度<{/t}></th>
        <td><input name='switchable_width' value="<{$setting.switchable_width|default:500}>" size="4">px</td>
        <th><{t app="b2c"}>高度<{/t}></th>
        <td><input name='switchable_height' value="<{$setting.switchable_height|default:320}>" size="4">px</td>
      </tr>
      <tr>
        <th><{t app="b2c"}>轮播效果<{/t}></th>
        <td><select name='eeffect'>
            <option value="scrollx" <{if $setting.eeffect=='scrollx'}>selected<{/if}>><{t app="b2c"}>左右<{/t}></option>
            <option value="scrolly" <{if $setting.eeffect=='scrolly'}>selected<{/if}>><{t app="b2c"}>上下<{/t}></option>
            <option value="fade" <{if $setting.eeffect=='fade'}>selected<{/if}>><{t app="b2c"}>透明<{/t}></option>
          </select>
        </td>
        <th><{t app="b2c"}>动画速度(建议小于间隔时间)<{/t}></th>
        <td><input name='duration' value="<{$setting.duration|default:1000}>" size="5">(1000/秒)</td>
      </tr>
      <tr>
        <th><{t app="b2c"}>是否自动播放<{/t}></th>
        <td><select name='autoplay'>
            <option value=false <{if $setting.autoplay=='false'}>selected<{/if}>><{t app="b2c"}>否<{/t}></option>
            <option value=true <{if $setting.autoplay=='true'}>selected<{/if}>><{t app="b2c"}>是<{/t}></option>
          </select>
        </td>
        <th><{t app="b2c"}>动画间隔时间<{/t}></th>
        <td><input name='interval' value="<{$setting.interval|default:2000}>" size="5">(1000/秒)</td>
      </tr>
      <tr>

        <th><{t app="b2c"}>悬浮是否停止<{/t}></th>
        <td><select name='pauseOnHover'>
            <option value=true <{if $setting.pauseOnHover=='true'}>selected<{/if}>><{t app="b2c"}>是<{/t}></option>
            <option value=false <{if $setting.pauseOnHover=='false'}>selected<{/if}>><{t app="b2c"}>否<{/t}></option>
        </select></td><th><{t app="b2c"}>过渡效果<{/t}></th>
        <td><select name='around'>
            <option value=true <{if $setting.around=='true'}>selected<{/if}>><{t app="b2c"}>前<{/t}></option>
            <option value=false <{if $setting.around=='false'}>selected<{/if}>><{t app="b2c"}>后<{/t}></option>
          </select>
        </td>
      </tr>
      <tr>
        <th><{t app="b2c"}>是否支持前后翻页<{/t}></th>
        <td>
          <select name='haslrbtn'>
            <option value=true <{if $setting.haslrbtn=='true'}>selected<{/if}>><{t app="b2c"}>是<{/t}></option>
            <option value=false <{if $setting.haslrbtn=='false'}>selected<{/if}>><{t app="b2c"}>否<{/t}></option>
          </select>
        </td>
      </tr>
    </table>
  </div>
  <div id="divisionCarousel" style="display:none">
    <h4><{t app="b2c"}>组图设置<{/t}></h4>
    <table width="100%" cellpadding="0" cellspacing="0">
      <tr>
        <th><{t app="b2c"}>组图数量<{/t}></th>
        <td><input name='steps' value="<{$setting.steps|default:5}>" size="10"></td>
      </tr>
      <tr>
        <th><{t app="b2c"}>图片宽度<{/t}></th>
        <td><input name='SinglePicWidth' value="<{$setting.SinglePicWidth|default:100}>" size="10"></td>
        <th><{t app="b2c"}>图片高度<{/t}></th>
        <td><input name='SinglePicHeight' value="<{$setting.SinglePicHeight|default:75}>" size="10"></td>
      </tr>
    </table>
  </div>
  <div id="divisionFont" style="display:none">
    <h4><{t app="b2c"}>文字设置<{/t}></h4>
    <div class="textcontent">
      <{foreach from=$setting.texts item=data key=key}>
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <th><{t app="b2c"}>文字内容:<{/t}></th>
          <td><input type=hidden name=texts[<{$data.id}>][id] value="<{$data.id}>"><input name='texts[<{$data.id}>][link]' class="text-content" id="text[<{$data.id}>][link]"  value="<{$data.link}>" style="width:200px"></td>
          <th><{t app="b2c"}>链接地址:<{/t}></th>
          <td><input name="texts[<{$data.id}>][linktarget]" value="<{$data.linktarget}>" style="width:200px"> </td>
          <td><span onclick="$(this).getParent('table').destroy()"><{img src="delecate.gif" style="cursor:pointer;" alt=$___b2c="删除"|t:'b2c' title=$___b2c="删除"|t:'b2c'}></span></td>
        </tr>
      </table>
      <{/foreach}>
    </div>
    <{button label=$___b2c="添加文字"|t:'b2c' class="addtext" app="desktop" icon="btn_add.gif"}>
  </div>
  <div class="division" id="divisionPic">
    <h4><{t app="b2c"}>图片设置<{/t}></h4>
    <table  width="100%" cellpadding="0" cellspacing="0">
      <tr>
        <th><{t app="b2c"}>是否有触点<{/t}></th>
        <td><select name='hasTriggers'>
            <option value=true <{if $setting.hasTriggers=='true'}>selected<{/if}>><{t app="b2c"}>是<{/t}></option>
            <option value=false <{if $setting.hasTriggers=='false'}>selected<{/if}>><{t app="b2c"}>否<{/t}></option>
          </select>
        </td>
        <th><{t app="b2c"}>是否延迟加载图片<{/t}></th>
        <td><select name='islazyload'>
            <option value=false <{if $setting.islazyload=='false'}>selected<{/if}>><{t app="b2c"}>否<{/t}></option>
            <option value=true <{if $setting.islazyload=='true'}>selected<{/if}>><{t app="b2c"}>是<{/t}></option>
          </select>
        </td>

      </tr>
      <tr>
        <th><{t app="b2c"}>触点样式<{/t}></th>
        <td>
          <select name='triggersPos'>
            <option value="triggersBottom" <{if $setting.triggersPos=='triggersBottom'}>selected<{/if}>><{t app="b2c"}>外面底<{/t}></option>
            <option value="triggersRight" <{if $setting.triggersPos=='triggersRight'}>selected<{/if}>><{t app="b2c"}>外面右<{/t}></option>
            <option value="triggersTop" <{if $setting.triggersTop=='triggersTop'}>selected<{/if}>><{t app="b2c"}>外面上<{/t}></option>
            <option value="triggersLeft" <{if $setting.triggersLeft=='triggersLeft'}>selected<{/if}>><{t app="b2c"}>外面左<{/t}></option>
            <option value="triggers-insideBottom" <{if $setting.triggersLeft=='triggers-insideBottom'}>selected<{/if}>><{t app="b2c"}>内部底<{/t}></option>
          </select>
        </td>
        <th><{t app="b2c"}>触点事件类型<{/t}></th>
        <td><select name='eventType'>
            <option value="mouse" <{if $setting.eventType=='mouse'}>selected<{/if}>><{t app="b2c"}>鼠标悬浮<{/t}></option>
            <option value="click" <{if $setting.eventType=='click'}>selected<{/if}>><{t app="b2c"}>点击<{/t}></option>
          </select>
        </td>
      </tr>
      <tr>
        <th><{t app="b2c"}>触点背景颜色<{/t}></th>
        <td>
          <input id="triggersBColor" name="triggersBColor" type="text" value="<{$setting.triggersBColor|default:'#f0f0f0'}>" size="7">
        </td>
        <th><{t app="b2c"}>触点背景激活颜色<{/t}></th>
        <td>
          <input id="triggersBAColor" name="triggersBAColor" type="text" value="<{$setting.triggersBAColor|default:'#D2D6E3'}>" size="7">
        </td>
      </tr>

      <tr>
        <th><{t app="b2c"}>触点字体颜色<{/t}></th>
        <td>
          <input id="triggersFColor" name="triggersFColor" type="text" value="<{$setting.triggersFColor|default:'#333'}>" size="7">
        </td>
        <th><{t app="b2c"}>触点字体激活颜色<{/t}></th>
        <td>
          <input id="triggersFAColor" name="triggersFAColor" type="text" value="<{$setting.triggersFAColor|default:'#3F5179'}>" size="7">
        </td>
      </tr>
      <tr>
        <th><{t app="b2c"}>触点背景透明度(0 - 1)<{/t}></th>
        <td>
          <input name="triggersOpacity" type="text" value="<{$setting.triggersOpacity|default:1}>" size="5">
        </td>
        <th><{t app="b2c"}>触点激活背景透明度(0 - 1)<{/t}></th>
        <td>
          <input  name="triggersAOpacity" type="text" value="<{$setting.triggersAOpacity|default:1}>" size="5">
        </td>
      </tr>
    </table>
    <h4><{t app="b2c"}>已添加的图片和文字<{/t}></h4>
    <div class="piccontent">
      <{foreach from=$setting.pic item=data key=key}>
      <table  width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <th><{t app="b2c"}>图片地址:<{/t}></th>
          <td><input type=hidden name=pic[<{$data.id}>][id] value="<{$data.id}>"><input name='pic[<{$data.id}>][link]' class="imgsrc" id="pic[<{$data.id}>][link]"  value="<{$data.link}>"><input type=button value=上传图片 class="uploadbtn"></td>
          <th><{t app="b2c"}>链接地址:<{/t}></th>
          <td><input name="pic[<{$data.id}>][linktarget]" value="<{$data.linktarget}>"> </td>
        </tr>
        <tr>
          <th><{t app="b2c"}>描述:<{/t}></th>
          <td><input name="pic[<{$data.id}>][linkinfo]" value="<{$data.linkinfo}>"> </td>
          <th><{t app="b2c"}>删除该图片及描述:<{/t}></th>
          <td><span onclick="$(this).getParent('table').destroy()"><{img src="delecate.gif" style="cursor:pointer;" alt=$___b2c="删除"|t:'b2c' title=$___b2c="删除"|t:'b2c'}></span></td>
        </tr>
      </table>
      <{/foreach}>
    </div>
    <{button label=$___b2c="添加图片"|t:'b2c' class="addimage" app="desktop" icon="btn_add.gif"}>

  </div>
</div>


<script>
  /*
  * 添加图片
  */
  (function(){
    var tag_type='table',tag_class='pic_items';

    document.getElement(".addimage").addEvent('click',function(){

      var i=new Date().getTime();

      var tpl='\
      <tr><th><{t app="b2c"}>图片地址:<{/t}></th>\
        <td><input type=hidden name=pic['+i+'][id] value="'+i+'"><input name="pic['+i+'][link]" class="imgsrc">\
          <input type=button value=<{t app="b2c"}>上传图片<{/t}> class="uploadbtn" id="pic['+i+']"></td>\
        <th><{t app="b2c"}>链接地址:<{/t}></th>\
        <td><input name="pic['+i+'][linktarget]"></td></tr>\
      <tr><th><{t app="b2c"}>描述:<{/t}></th>\
        <td><input name="pic['+i+'][linkinfo]"></td>\
        <th><{t app="b2c"}>删除该图片及描述:<{/t}></th>\
        <td><span onclick="$(this).getParent(\'table\').destroy()"><{img src="delecate.gif" style="cursor:pointer;" alt=$___b2c="删除"|t:'b2c' title=$___b2c="删除"|t:'b2c'}></span></td>\
      </tr>';

      $('picAddress').getElement('.piccontent').adopt(new Element(tag_type,{'html':tpl,'width':'100%','class':tag_class}));

      $('pic['+i+']').addEvent('click',function(e){bindevent(this)});
    });


    $$(".piccontent .uploadbtn").addEvent('click',function(e){bindevent(this)});

    function bindevent(el){
      var target=$(el).getParent(tag_type).getElement('.imgsrc');
      var url='index.php?app=desktop&act=alertpages&goto='+encodeURIComponent("index.php?app=image&ctl=admin_manage&act=image_broswer&type=big");
      return new imgDialog(url,{onCallback:function(image_id,image_src){
          target.value=image_src;
          }})
        };

      })();

    </script>
    <script>
      /*
      * 根据模板选择配置
      */
      function getCfgForm(id){
        var config = $(id);
        while(config.tagName != 'FORM'){
          config = config.getParent();
        }
        return config;
      }

      var sels = getCfgForm('cat-config').getElements('select');
      var wgtTpl = '';
      sels.each(function(sel){
        if(sel.getProperty('name') == '__wg[tpl]') wgtTpl = sel;
      });
      var setView = function(view){
        if(view=== 'default.html'){
          $('divisionCarousel').setStyle('display','none');
          $('divisionFont').setStyle('display','none');
          $('divisionPic').setStyle('display','block');
          }else if(view=== 'carousel.html'){
          $('divisionCarousel').setStyle('display','block');
          $('divisionPic').setStyle('display','block');
          $('divisionFont').setStyle('display','none');
          }else{
          $('divisionFont').setStyle('display','block');
          $('divisionCarousel').setStyle('display','none');
          $('divisionPic').setStyle('display','none');
        }

      }

      setView(wgtTpl.value);
      wgtTpl.addEvent('change',function(){
        setView(wgtTpl.value);
      })
    </script>
    <script>
      /*
      *添加纯文字
      */
      var tag_type='table',tag_class='text_item';

      document.getElement(".addtext").addEvent('click',function(){

        var i=new Date().getTime();

        var tpl='\
        <tr><th><{t app="b2c"}>文字内容:<{/t}></th>\
          <td><input type=hidden name=texts['+i+'][id] value="'+i+'"><input name="texts['+i+'][link]" class="imgsrc" style="width:200px">\ </td>\
          <th><{t app="b2c"}>链接地址:<{/t}></th>\
          <td><input name="texts['+i+'][linktarget]" style="width:200px"></td>\<td><span onclick="$(this).getParent(\'table\').destroy()"><{img src="delecate.gif" style="cursor:pointer;" alt=$___b2c="删除"|t:'b2c' title=$___b2c="删除"|t:'b2c'}></span></td>\</tr>';

        $('picAddress').getElement('.textcontent').adopt(new Element(tag_type,{'html':tpl,'width':'100%', 'cellpadding':'0','cellspacing':'0','class':tag_class}));

      });
    </script>
    <script>
      Ex_Loader("picker",function(){
        var colorArray = ['triggersBColor','triggersBAColor','triggersFColor','triggersFAColor'];
        for(var i=0;i<4;i++){
          (function(i){
            new GoogColorPicker($(colorArray[i]),{
              onSelect:function(hex,rgb,el){
                $(colorArray[i]).set("value",hex);
              }
          })})(i)

        }
      });
    </script>
